<template>
	<view>
		<view class="formModel">
			<view class="cu-form-group">
				<view class="title">土地类型</view>
				<picker @change="PickerChange" :value="index" :range="landType">
					<view class="picker">
						{{index>-1?landType[index]:"请选择"}}
					</view>
				</picker>
			</view>

			<view class="cu-form-group">
				<view class="title">所在地区</view>
				<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
					<view class="picker">
						<text v-if="regionName">{{regionName}}</text>
						<text v-else>点击选择省市区</text>
					</view>
				</pick-regions>
			</view>
			<view class="cu-form-group">
				<view class="title">详细地址</view>
				<input placeholder="请输入详细地址" name="input" v-model="landDetails"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">租让时间</view>
				<picker mode="date" :value="leaseTime" :start="startDate" :end="endDate" @change="leaseTimeChange">
					<view class="picker">{{leaseTime}}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">土地期限</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="picker">{{date}}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">流转类型</view>
				<picker @change="exchangeChange" :value="exchangeIndex" :range="exchange">
					<view class="picker">
						{{exchangeIndex>-1?exchange[exchangeIndex]:"请选择"}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">土地面积</view>
				<input type="digit" placeholder="请输入面积" maxlength="12" name="input" v-model="landArea"></input>
				<picker @change="centiareChange" :value="centiareIndex" :range="centiare">
					<view class="picker">
						{{centiareIndex>-1?centiare[centiareIndex]:"请选择面积单位"}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">土地价格</view>
				<input type="digit" placeholder="请输入金额" maxlength="15" name="input" v-model="price"></input><text>单位/万元</text>
			</view>

			<view class="imageUp">
				<view class="cu-bar bg-white" style="justify-content: space-between;margin-top:5rpx">
					<view class="action">
						土地图片上传
					</view>
					<view class="action" style="font-size: 30rpx;">
						{{imgList.length}}/{{maxImg}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length<9">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
			<!-- 身份证图片上传 -->
			<view class="imageUp">
				<view class="cu-bar bg-white" style="justify-content: space-between;margin-top:5rpx">
					<view class="action">
						身份证图片上传
					</view>
					<view class="action" style="font-size: 30rpx;">
						{{idList.length}}/{{idMaxImg}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in idList" :key="index" @tap="idViewImage" :data-url="idList[index]">
							<image :src="idList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="idDelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="idChooseImage" v-if="idList.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
			<!-- 土地权证 -->
			<view class="imageUp">
				<view class="cu-bar bg-white" style="justify-content: space-between;margin-top:5rpx">
					<view class="action">
						土地权证上传
					</view>
					<view class="action" style="font-size: 30rpx;">
						{{landList.length}}/{{landMaxImg}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in landList" :key="index" @tap="landViewImage" :data-url="landList[index]">
							<image :src="landList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="landDelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="landChooseImage" v-if="landList.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">土地权证证号</view>
				<input type="digit" placeholder="请输入土地权证证号" maxlength="15" name="input" v-model="license"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">土地简介：</view>
			</view>
			<view class="cu-form-group ">
				<textarea maxlength="-1" @input="textareaAInput" placeholder="可输入土地状况,价值说明,对融资者的要求等信息" v-model="introduce"></textarea>
			</view>
			<view class="cu-form-group">
				<view class="title">土地流转历史：</view>
			</view>
			<view class="cu-form-group ">
				<textarea maxlength="-1" @input="textareaAInput" placeholder="土地的流转历史" v-model="history"></textarea>
			</view>
			<view class="cu-form-group">
				<view class="title">土地联系人</view>
				<input type="text" placeholder="请输入联系人名字" maxlength="7" name="input" v-model="land_contact"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">土地联系人电话</view>
				<input type="digit" placeholder="请输入联系人电话" maxlength="11" name="input" v-model="land_contact_phone"></input>
			</view>
		</view>
		<view class="submit"><button class="" @click="but">保存</button></view>
	</view>
</template>
<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'

	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}

	export default {
		components: {
			pickRegions
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		data() {
			return {
				//三级联动
				region: [],
				regionStr: '',
				defaultRegion: ['广东省', '广州市', '番禺区'],
				defaultRegionCode: '440113',


				date: getDate({
					format: true
				}),
				leaseTime: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				time: '', //ui库
				index: -1,
				landType: ['耕地', '林地', '园地', '草地', '养殖用地', '工矿仓储', '商业住宅', '农房', '其他用地'],
				exchange: ['转让', '出租', '转包', '合作', '入股'],
				exchangeIndex: -1,
				landDetails: '',
				centiare: ['亩', '平方米'],
				landArea: '1',
				centiareIndex: -1,
				price: '100',
				license: '001',
				introduce: '土地简介',
				history: '土地流转历史',
				land_contact: '土地人',
				land_contact_phone: '13123447647',
				area: [], //全国各地区

				imgList: [], //土地图片
				imgURLList: [], //土地图片url
				imgDiskList: [], //土地图片磁盘地址
				maxImg: 9, //土地图片

				idList: [], //身份证图片
				IDimg: '', //身份证图片url
				IDimgDisk: '', //身份证图片磁盘地址
				idMaxImg: 1, //身份证图片

				landList: [], //土地权证图片
				landImg: '', //土地权证图片url
				landImgDisk: '', //土地权证图片磁盘地址
				landMaxImg: 1, //土地权证图片

			};
		},
		onNavigationBarButtonTap(e) {
			setTimeout(() => {
				this.toRedact(this.judge)
			}, 80)
		},
		onReady() {
			// this.a();
		},
		onLoad() {

		},
		methods: {
			//点击按钮
			but() {
				uni.showModal({
					title: '提示',
					content: "确定要保存所做的更改吗？",
					success: (data) => {
						if (this.regionName.length > 0) {
							for (let i = 0; i < this.regionName.length; i++) {

								// console.log("this.regionName[i]: " + this.regionName[i])
								this.regionStr = this.regionStr + this.regionName[i]
							}
							// console.log("this.regionStr: " + this.regionStr)
							this.regionStr = this.regionStr.split(" ")
							// console.log("regionStr: " + this.regionStr)
						}
						if (data.confirm) {
							uni.showLoading();
							this.upImage(); //土地图片上传
							this.upIdImage(); //上传身份证图片
							this.upLandImage(); //上传土地权证图片
							this.setLandInfo(); //采集土地
						}

					}
				})
			},
			//添加采集土地
			async setLandInfo() {
				let res = await this.$http({
					url: "/app/person/addLand",
					method: "POST",
					data: {
						// type: this.landType || this.userInfo.user_name,
						type: this.landType || this.landType, //土地类型
						province: this.regionStr[0] || this.regionStr[0], //土地省
						city: this.regionStr[1] || this.regionStr[1], //土地市
						county: this.regionStr[2] || this.regionStr[2], //土地县
						address: this.landDetails || this.landDetails, //详细地址
						lease_time: this.startDate || this.startDate, //转让时间
						term: this.endDate || this.endDate, //土地期限
						circulation: this.exchange || this.exchange, //流转类型
						area: this.landArea || this.landArea, //土地面积
						price: this.price || this.price, //土地价格
						photosList2: this.imgURLList || this.imgURLList, //土地图片
						photosList1: this.imgDiskList || this.imgDiskList, //土地图片磁盘地址
						idCodePath: this.IDimg || this.IDimg, //身份证图片
						user_idcardphoto: this.IDimgDisk || this.IDimgDisk, //身份证图片磁盘地址
						landCodePath: this.landImg || this.landImg, //土地权证图片
						license_photo: this.landImgDisk || this.landImgDisk, //土地权证图片磁盘地址
						license: this.license || this.license, //土地证号
						introduce: this.introduce || this.introduce, //土地简介
						history: this.history || this.history, //土地流转历史
						land_contact: this.land_contact || this.land_contact, //土地联系人
						land_contact_phone: this.land_contact_phone || this.land_contact_phone, //土地联系人电话

					}

				})
				if (res.data.code == 200) {
					setTimeout(() => {
						uni.hideLoading();
						uni.showToast({
							title: "成功",
							icon: "none"
						})
						console.log("成功")
					}, 500)
				} else {
					setTimeout(() => {
						uni.hideLoading();
						uni.showToast({
							title: res.data.message
						})
					}, 500)
				}
			},
			// 获取选择的地区
			handleGetRegion(region) {
				this.region = region
			},

			//多行文本框
			textareaAInput(e) {
				// console.log(this.postscript)
			},
			// 	a(){
			// 		JSON.parent(nationwide) = this.area;
			// console.log(nationwide);
			// console.log(this.area);
			// 	},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			leaseTimeChange: function(e) {
				this.leaseTime = e.detail.value
			},
			//土地类型选择
			PickerChange(e) {
				this.index = e.detail.value
			},
			//流转类型选择
			exchangeChange(e) {
				this.exchangeIndex = e.detail.value
			},
			//单位选择
			centiareChange(e) {
				this.centiareIndex = e.detail.value
			},
			//验证手机号
			isPhone() {
				let regex = {
					mobile: /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/
				};
				return regex.mobile.test(this.phone);
			},
			isStandbyPhone() {
				let regex = {
					mobile: /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/
				};
				return regex.mobile.test(this.standbyPhone);
			},
			//土地图片
			ChooseImage() {
				uni.chooseImage({
					count: this.maxImg - this.imgList.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
							if (this.imgList.length > 0) {
								for (let i = 0; i < this.imgList.length; i++) {}
							}
							console.log(this.imgList)
						} else {
							this.imgList = res.tempFilePaths;
							console.log(this.imgList)
							if (this.imgList.length > 0) {
								for (let i = 0; i < this.imgList.length; i++) {}
							}
						}
					}
				});
			},
			//土地图片上传
			upImage() {
				if (this.imgList.length > 0) {
					for (let i = 0; i < this.imgList.length; i++) {
						uni.uploadFile({
							url: this.confige.webUrl + "/app/uploadLandPhotos",
							filePath: this.imgList[i],
							name: 'file',
							formData: {}
						}).then((data) => {
							var [error, res] = data;
							console.log(JSON.parse(res.data))
							let jsp = JSON.parse(res.data);
							this.imgURLList[i] = jsp.data.data2
							this.imgDiskList[i] = jsp.data.data

							// console.log("this.imgDiskList[i]:"+this.imgDiskList[i])

						})
					}
				}

			},
			//预览图片
			ViewImage(e) {
				console.log(e)
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//取消上传
			DelImg(e) {
				console.log(e)
				uni.showModal({
					title: '提示',
					content: '确定要取消该照片的上传吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)

						}
					}
				})
			},
			//身份证图片
			idChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.idList.length != 0) {
							this.idList = this.idList.concat(res.tempFilePaths)
							if (this.idList.length > 0) {
								for (let i = 0; i < this.idList.length; i++) {}
							}
							console.log(this.idList)
						} else {
							this.idList = res.tempFilePaths;
							console.log(this.idList)
							if (this.idList.length > 0) {
								for (let i = 0; i < this.idList.length; i++) {}
							}
						}
					}
				});
			},
			//身份证图片上传
			upIdImage() {
				uni.uploadFile({
					url: this.confige.webUrl + "/app/uploadIDCode",
					filePath: this.idList[0],
					name: 'file',
					formData: {}
				}).then((data) => {
					var [error, res] = data;
					console.log(res.data)
					let jsp = JSON.parse(res.data);
					this.IDimg = jsp.data.msg1
					this.IDimgDisk = jsp.data.data
					// console.log(this.IDimgDisk)

				})
			},
			//预览身份证图片
			idViewImage(e) {
				console.log(e)
				uni.previewImage({
					urls: this.idList,
					current: e.currentTarget.dataset.url
				});
			},
			//身份证图片取消上传
			idDelImg(e) {
				console.log(e)
				uni.showModal({
					title: '提示',
					content: '确定要取消该照片的上传吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.idList.splice(e.currentTarget.dataset.index, 1)

						}
					}
				})
			},
			//土地权证图片
			landChooseImage() {
				uni.chooseImage({
					count: this.landMaxImg - this.landList.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.landList.length != 0) {
							this.landList = this.landList.concat(res.tempFilePaths)
							if (this.landList.length > 0) {
								for (let i = 0; i < this.landList.length; i++) {}
							}
							console.log(this.landList)
						} else {
							this.landList = res.tempFilePaths;
							console.log(this.landList)
							if (this.landList.length > 0) {
								for (let i = 0; i < this.landList.length; i++) {}
							}
						}
					}
				});
			},
			//土地权证图片上传
			upLandImage() {
				uni.uploadFile({
					url: this.confige.webUrl + "/app/uploadLandCode",
					filePath: this.landList[0],
					name: 'file',
					formData: {}
				}).then((data) => {
					var [error, res] = data;
					console.log(res.data)
					let jsp = JSON.parse(res.data);
					this.landImg = jsp.data.msg1
					this.landImgDisk = jsp.data.data
					// console.log(this.landImgDisk) 

				})
			},
			//预览图片
			landViewImage(e) {
				console.log(e)
				uni.previewImage({
					urls: this.landList,
					current: e.currentTarget.dataset.url
				});
			},
			//取消上传
			landDelImg(e) {
				console.log(e)
				uni.showModal({
					title: '提示',
					content: '确定要取消该照片的上传吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.landList.splice(e.currentTarget.dataset.index, 1)

						}
					}
				})
			}

		}
	}
</script>

<style lang="less" scoped>
	@import "../../../common/colorui/main.css";
	@import "../../../common/colorui/icon.css";
	@import "../../../common/global.less";

	page {}

	.submit {
		width: 700rpx;
		height: 150rpx;
		margin-left: 25rpx;
		margin-top: 40rpx;

		>button {
			background: #34AB68;
			color: white;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 32rpx;
		}
	}

	.placeholderClass {
		color: #eaeaea;
	}

	.mapText {
		font-size: 28upx;
	}

	.RadioStyle {
		radio {
			margin-right: 10rpx;
			font-size: 30rpx;
		}
	}

	.bottomModel {
		margin-top: 50rpx;
		// .butStyle{font-size: 30rpx; border-radius: 90rpx;width: 600rpx; height:80rpx;line-height: 80rpx;color:#FFFFFF; background-color:@maincolor;}
	}

	.formModel {
		background-color: @backcolorthree;
		border-bottom: 2rpx solid #eaeaea;

		.cu-form-group {
			.title {
				min-width: calc(4em + 15px);
			}
		}
	}
</style>
